<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center tearhejspy_flex_0_ibhf" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub tearhejspy_fd0_0_ibhf'>
                    <view class='flex flex-wrap align-center tearhejspy_fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  tearhejspy_fd0_0_c0_c0_ibhf'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='tearhejspy_fd0_0_c1_c0_ibhf'>教师评语</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end tearhejspy_fd0_0_c0_ibhf'>
                    </view>
                </view>
            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex benben-flex-layout flex-wrap align-center">
                <view class='flex flex-wrap tearhejspy_fd1_0_ibhf'>
                    <benben-textarea class='flex tearhejspy_input_fd1_0_ibhf' :placeholder="'请输入您对学生的评语吧'" :adjust-position='true' :maxlength="240" :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="comment" />
                    <template>
                        <view class='flex flex justify-end tearhejspy_numberfd1_0_c0_ibhf'>
                            <text>{{comment.length}}</text>
                            <text>/</text>
                            <text>240</text>
                        </view>
                    </template>
                </view>
				<!-- <view class="">
					<speech-to-text @recognized="onSpeechRecognized" />
					 <button @click="useSpeechInput" class='tearhejspy_fd1_1_ibhf' v-if="type==1">语音评</button>
				</view> -->
               
               <!-- <benben-images-upload ref="benbenImagesUploadfd1_2" :is-show-tips='true' :maxlength="9">
                    <template #content="{ num, maxlength, isShow}">
                        <view class="flex flex-wrap align-start flex tearhejspy_fd1_2_ibhf">

                            <view v-for="(image, index) in 0" :key="index" class='flex position-relative tearhejspy_fd1_20_ibhf'>
                                <benben-clean-icon class='fu-iconfont2 position-absolute tearhejspy_fd1_200_ibhf' hand-name="benben-images-upload" hand-method="delImage" :hand-index="index">&#xE8E7;</benben-clean-icon>
                                <benben-image-item class='tearhejspy_fd1_201_ibhf' mode="aspectFit" hand-name="benben-images-upload" hand-method="previewImage" :hand-index="index" :src='image'></benben-image-item>
                            </view>


                            <benben-image-item class='tearhejspy_fd1_21_ibhf' mode="aspectFit" hand-name="benben-images-upload" hand-method="manyChooseImage" v-if="isShow" :src='STATIC_URL+"76.png"'></benben-image-item>
                            <text class='image_upload_tips tearhejspy_fd1_22_ibhf'>最多上传{{num}}/{{maxlength}}张图片</text>
                        </view>
                    </template>
                </benben-images-upload> -->
            </view>

            <!---flex布局flex布局结束-->
            <view class="flex flex-wrap align-center justify-center benben-position-layout flex tearhejspy_flex_2_ibhf"  v-if="type==1">
                <button class='tearhejspy_fd2_0_ibhf' @tap.stop="py">{{ispy?'确认提交':'编辑'}}</button>

            </view>
            <view :style="{height: '88rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
	import SpeechToText from './speech-to-text.vue';
    export default {
        components: {
			SpeechToText
		},


        data() {
            return {
                "fd1_0": "",
				aid:'',//学生作业ID
				comment:'',
				ispy:false,
				type:1,//0学生 1教师
				usertype:1,//3考试
				user_id:'',//学生id
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
			this.usertype=options.usertype?options.usertype:this.usertype
			this.aid=options.aid
			this.type=options.type?options.type:1
			this.comment = options.title?options.title:''
			this.ispy=this.comment?false:true
			this.user_id=options.uid?options.uid:this.user_id
			// console.log(this.type)
			// console.log(this.comment)
			// console.log(this.ispy)
			return
			this.getpy()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			
			onSpeechRecognized(text) {
			  console.log('识别结果:', text);
			  // 处理识别结果
			  this.inputText = text;
			},
			
			useSpeechInput() {
			  // 手动触发语音识别
			  this.$refs.speech.startRecognition();
			},
			
			// 获取评语
			async getpy() {
				
				let res = await this.$api.post(global.apiUrls.post68f08c2d7bee4, {
					aid:this.aid,
				});
			
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
			
				this.comment = res.data.data.comment?res.data.data.comment:''
				this.ispy=this.comment?false:true
				// console.log('llllllllllllll', res.data.data);
			},
			// 提交批阅
			async py() {
				let url=global.apiUrls.post68f0912839b78
				let obj={
					aid:this.aid,
					comment:this.comment,
				}
				if(this.usertype==3){
					url=global.apiUrls.post6870ce8125420
					obj={
						papercourse_id:this.aid,
						comment:this.comment,
						user_id:this.user_id
					}
				}
				
				let res = await this.$api.post(url, obj);
			
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				uni.$emit('addpy', 1)
				uni.navigateBack()
				
			},
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;

        .tearhejspy_flex_2_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            bottom: calc(88rpx + var(--window-bottom));

            .tearhejspy_fd2_0_ibhf {
                border-radius: 12rpx;
                width: 702rpx;
                line-height: 84rpx;
                font-size: 24rpx;
                background: #145EFD;
                color: #fff;
                height: 84rpx;
            }
        }

        .tearhejspy_fd1_0_ibhf {
            width: 100%;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            background: #F8F9FD;
            padding: 10rpx 10rpx 0rpx 16rpx;
            margin: 24rpx 32rpx 0rpx 32rpx;

            .tearhejspy_input_fd1_0_ibhf {
                width: 100%;
                height: 320rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #333;
                white-space: pre-wrap;
            }

            .tearhejspy_numberfd1_0_c0_ibhf {
                width: 100%;
                font-size: 24rpx;
                color: #cccccc;
                line-height: 46rpx;
                font-weight: 400;
            }
        }

        .tearhejspy_fd1_1_ibhf {
            border-radius: 33rpx 33rpx 33rpx 33rpx;
            width: 180rpx;
            line-height: 84rpx;
            font-size: 24rpx;
            background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
            color: #fff;
            height: 84rpx;
            margin: 32rpx 0rpx 0rpx 32rpx;
        }

        .tearhejspy_fd1_2_ibhf {
            width: 750rpx;
            padding: 24rpx 0rpx 0rpx 24rpx;
            margin: 032rpx 0rpx 0rpx 0rpx;

            .tearhejspy_fd1_20_ibhf {
                margin: 0rpx 24rpx 24rpx 0rpx;

                .tearhejspy_fd1_200_ibhf {
                    top: 0rpx;
                    right: 0rpx;
                    z-index: 10;
                    color: #ff5536;
                }

                .tearhejspy_fd1_201_ibhf {
                    width: 200rpx;
                    height: 200rpx;
                }
            }

            .tearhejspy_fd1_21_ibhf {
                width: 200rpx;
                height: 200rpx;
                margin: 0rpx 24rpx 24rpx 0rpx;
            }

            .tearhejspy_fd1_22_ibhf {
                width: 100%;
                font-size: 32rpx;
                color: #d5d5d5;
            }
        }

        .tearhejspy_flex_0_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .tearhejspy_fd0_0_ibhf {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .tearhejspy_fd0_0_c1_c0_ibhf {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .tearhejspy_fd0_0_c0_ibhf {
            width: 120rpx;

            .tearhejspy_fd0_0_c0_c0_ibhf {
                font-size: 36rpx;
                color: #333;
            }
        }
    }
</style>